<script>
import School from "./components/School.vue";
import Student from "./components/Student.vue";
import HelloWorld from "./components/HelloWorld.vue";
export default {
  name: "App",
  components:{HelloWorld, Student,School},
  data(){
    return {msg:'ref的使用'}
  },
  methods:{
    showDOM(){
      //ref打在html标签上时,获取到的时标签真实DOM
      console.log(this.$refs.h1);
      //ref打在组件标签时,获取到的是组件实例对象vc
      console.log(this.$refs.sch);
      //给组件标签打上id,最终id会跑到组件的根容器上去,获取到的是根元素的真实DOM
      console.log(document.getElementById('stu'));
    }
  }
}
</script>

<template>
  <div>
    <h1 v-text="msg" ref="h1"></h1>
    <button @click="showDOM">点我获取上方dom元素</button>
    <School ref="sch"></School>
    <Student id="stu"></Student>
    <HelloWorld></HelloWorld>
  </div>

</template>

<style scoped>

</style>
